/* 
	px和em的区别
	px固定，em不固定
	em继承父级元素的字体大小
	浏览器默认字体为16px，未经调整的浏览器都符合：1em=16px
	那么10px=0.625em
 */
body {
  font-family: 微软雅黑 sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #003e46;
  min-height: 100vh;
  /* min-height 该属性值会对元素的高度设置一个最低限制。
          因此，元素可以比指定值高，但不能比其矮。不允许指定负值。 */
}
.container {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  /* wrap	规定灵活的项目在必要的时候拆行或拆列。 */
  justify-content: space-between;
}
.box {
  position: relative;
  width: 300px;
  height: 400px;
  background: #000;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
  /* h-shadow	必需的。水平阴影的位置。允许负值
     v-shadow	必需的。垂直阴影的位置。允许负值
     blur	可选。模糊距离
     spread	可选。阴影的大小 */
}
.box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-fit: cover
    指定元素的内容应该如何去适应指定容器的高度与宽度
    contain	保持原有尺寸比例。内容被缩放。
    cover	保持原有尺寸比例。但部分内容可能被剪切。
    scale-down	保持原有尺寸比例。
    内容的尺寸与 none 或 contain 中的一个相同，
    取决于它们两个之间谁得到的对象尺寸会更小一些。
  */
  /* 
  关于清除浮动的方法
1.给浮动的元素的父级元素设置宽高。
2. 使用负margin。
3. 给浮动的元素的父级元素设置overflow:hidden;
4. 给浮动元素的父级元素添加伪元素after（
注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）,
即在元素末尾添加一个内容为空并带有 clear: both 属性的元素实现的
  */
  transition: 0.5s;
}
.box:hover .imgBx img {
  opacity: 0;
}
.box .content {
  position: absolute;
  bottom: 20px;
  left: 10%;
  width: 80%;
  height: 60px;
  background-color: #fff;
  transition: 0.5s;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
}
.box:hover .content {
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
}
.box .content h3 {
  margin: 0;
  padding: 0;
  font-size: 20px;
}
.box .content p {
  margin: 10px 0 0;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* text-align: justify; */
  /* justify	实现两端对齐文本效果。 */
  /* line-height: 12em; */
}
.box:hover .content p {
  opacity: 1;
  transition-delay: 0.5s;
  /* 在过渡效果开始前等待 0.5 秒： */
}
